<template>
  <div>
    <slot name="head"></slot>
    <div v-for="input in customInput">
      {{input.label}}<input>
    </div>
    <slot name="center"></slot>
    <div v-for="button in customButton" @click="button.f()">
      <button :class="styles['custom-button']">{{button.label}}</button>
    </div>
    <slot name="foot"></slot>
  </div>
</template>

<script>
  import {groupBy} from 'lodash'
  import styles from './custom-form.scss'

  export default {
    name: "custom-form",
    components: {},
    model: {},
    props: {
      customFormData: {
        type: Array
      }
    },
    data() {
      return {
        customInput: [],
        customButton: [],
        customModel: {},
        styles
      }
    },
    computed: {},
    created: function () {
      this.initData()
    },
    mounted: function () {

    },
    updated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
      initData() {
        let typeArray = groupBy(this.customFormData, 'type')
        if (typeArray.input.length) {
          this.customInput.splice(0, 0, ...typeArray.input)
          this.customInput.forEach((val) => {
            this.$set(this.customModel, val, '')
          })
        }
        if (typeArray.button.length) {
          this.customButton.splice(0, 0, ...typeArray.button)
        }
      }
    }
  }
</script>
